<template>
    <div class="left-card">
      <el-card shadow="hover">
        <div class="header">
          <div class="title">关键词搜索</div>
        </div>
        <div class="body">
          <div class="top">
            <div class="user">
              <div class="title">搜索用户量</div>
              <div class="value">{{ total1 }}</div>
              <v-chart :option="option1"></v-chart>
            </div>
            <div class="search">
              <div class="title">搜索量</div>
              <div class="value">{{ total2 }}</div>
              <v-chart :option="option2"></v-chart>
            </div>
          </div>
          <div class="bottom">
            <el-table :data="currentTableData" style="width: 100%">
              <el-table-column prop="rank" label="排名" align="center" />
              <el-table-column prop="keyWord" label="关键词" align="center" />
              <el-table-column
                prop="totalSearch"
                label="总搜索量"
                align="center"
              />
              <el-table-column
                prop="totalUser"
                label="搜索用户数"
                align="center"
              />
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :current-page="currentPage"
                :page-sizes="[6, 10, 20]"
                :page-size="pageSize"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getkeyWordData } from '../api/index.js';
const option1 = ref({});
const option2 = ref({});
const keywordData = ref([]);
const totalSearchs = ref([]);
const totalUsers = ref([]);
const tableData = ref([]);

const currentPage = ref(1);
const pageSize = ref(6);
const renderChart = (data, num) => {
  num.value = {
    xAxis: {
      show: false,
      type: 'category',
      // boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: {
      top: 0,
      left: -100,
      right: 0,
      bottom: 30,
    },
    series: [
      {
        data: data,
        type: 'line',
        smooth: true,
        areaStyle: {
          opacity: 0.5,
          color: 'skyblue',
        },

        lineStyle: {},
        itemStyle: {
          opacity: 0,
        },
      },
    ],
  };
};
onMounted(async () => {
  keywordData.value = await getkeyWordData();
  totalSearchs.value = keywordData.value
    .map((item) => item.totalSearch)
    .sort((a, b) => a - b);
  totalUsers.value = keywordData.value
    .map((item) => item.totalUser)
    .sort((a, b) => a - b);
  renderChart(totalSearchs.value, option2);
  renderChart(totalUsers.value, option1);
  tableData.value = keywordData.value;
});
const total1 = computed(() => {
  return totalUsers.value.reduce((acc, cur) => acc + cur, 0);
});
const total2 = computed(() => {
  return totalSearchs.value.reduce((acc, cur) => acc + cur, 0);
});

const currentTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});


const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1; 
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};
</script>

<style scoped>
.left-card {
  width: 50%;
}

.header {
  border-bottom: 1px solid #eee;
  height: 40px;
}
.title {
  font-weight: bold;
  line-height: 30px;
}
.user {
  width: 50%;
  height: 100px;
  margin: 20px 0 20px 20px;
}
.search {
  width: 50%;
  height: 100px;
  margin: 20px 20px 20px 0;
}
.top {
  display: flex;
  gap: 20px;
}
.top .title {
  font-size: 14px;
  color: #797575;
}
.top .value {
  font-size: 20px;
  font-weight: bold;
}
.bottom {
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
  transform: translateX(50%);
}
</style>